<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>英雄联盟LPL比赛数据可视化 BY:Java_S</title>
    <link rel="shortcut icon" href="lol.ico" type="image/x-icon">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script type="text/javascript" src="js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>

<body>
    <div style="background:#000d4a url(img/bg.png) center top;">
        <div class="loading">
            <div class="loadbox"> <img src="img/loading.gif"> 页面加载中... </div>
        </div>
        <div class="back"></div>
        <div class="head">
            <div class="weather"><span id="showTime"></span></div>
            <a href="https://gitee.com/iGaoWei/big-data-view" target="_blank">
                <h1>英雄联盟LPL比赛数据可视化</h1>
            </a>
        </div>
        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height:400px;">
                        <div class="alltitle">个人数据堆叠图</div>
                        <div class="navboxall" id="echart5"></div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">英雄数据轮播</div>
                        <div class="navboxall">
                            <div class="wraptit">
                                <span>英雄名</span><span>出场次数</span><span>Pick比率</span><span>胜率</span>
                            </div>
                            <div class="wrap" id="hero"></div>
                        </div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">2024LPL夏季赛总冠军</div>

                        <div class="navboxall" id="echart1"></div>
                    </div>
                </li>
                <li>

                    <div class="boxall" style="height:230px">
                        <div class="clearfix navboxall" style="height: 100%">

                            <div class="pulll_left zhibiao">
                                <div class="zb1"><span>TES<br>胜率最高</span>
                                    <div id="zb1"></div>
                                </div>
                                <div class="zb2"><span>JDG<br>击杀最高</span>
                                    <div id="zb2"></div>
                                </div>
                                <div class="zb3"><span>SN<br>插眼最多</span>
                                    <div id="zb3"></div>
                                </div>
                            </div>
                            <div class="pulll_right zhibiao ">
                                <div class="zb4"><span>TESknight<br>击杀最多</span>
                                    <div id="zb4"></div>
                                </div>
                                <div class="zb5"><span>IGTheShy<br>死亡最多</span>
                                    <div id="zb5"></div>
                                </div>
                                <div class="zb6"><span>V5y4<br>KDA最高</span>
                                    <div id="zb6"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="boxall" style="height:350px">
                        <div class="alltitle">战队胜负数据</div>
                        <div class="navboxall" id="echart4"></div>
                    </div>

                    <div class="boxall" style="height:340px">
                        <div class="alltitle">个人击杀数据</div>
                        <div class="navboxall" id="echart3"></div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height:300px">
                        <div class="alltitle">战队排行榜</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody id="team">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="boxall" style="height: 300px">
                        <div class="alltitle">个人排行榜</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody id="personal"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="boxall" style="height:320px">
                        <div class="alltitle">MVP种子选手</div>
                        <div class="navboxall" id="echart2"></div>
                    </div>
                </li>
            </ul>

        </div>
    </div>

    <script>


        $.get("http://localhost:8080/hero/get",function (res){
            console.log(res)
            let Str = "<ul>"
            for (let item of res){
                Str += "<li>" +
                    "<p>" +
                    "<span>"+item.name+"</span>" +
                    "<span>"+item.times+"</span>" +
                    "<span>"+item.pic+"%</span>" +
                    "<span>"+item.win+"%</span>" +
                    "</p>" +
                    "</li>"
            }
            Str += "</ul>"
            document.getElementById("hero").innerHTML = Str

            $(function () {
                $('.wrap,.adduser').liMarquee({
                    direction: 'up',
                    /*向上滚动*/
                    runshort: false,
                    /*内容不足时不滚动*/
                    scrollamount: 20 /*速度*/
                });
            });
        })

        /**
         * 团队排行榜
         */
        $.get("http://localhost:8080/team/get-order", function (res) {
            let count = 0
            var Str = "<tr>" +
                "<th scope=\"col\" class=\"toptop\">排名</th>" +
                "<th scope=\"col\">战队</th>" +
                "<th scope=\"col\">出场次数</th>" +
                "<th scope=\"col\">胜率</th>" +
                "</tr>";
            for (let item of res) {
                if (count >= 5) {
                    break;
                }
                count++
                Str += "<tr>" +
                    "<td><span>" + count + "</span></td>" +
                    "<td>" + item.steamName + "</td>" +
                    "<td>" + item.iappearancesFrequency + "<br></td>" +
                    "<td>" + item.saveragingWin + "%<br></td>" +
                    "</tr>"
            }
            document.getElementById("team")
                .innerHTML = Str;
        })

        /**
         * 个人排行榜
         */
        $.get("http://localhost:8080/personalStatistics/get-order", function (res) {
            let count = 0
            var Str = "<tr>" +
                "<th scope=\"col\" class=\"toptop\">排名</th>" +
                "<th scope=\"col\">队员</th>" +
                "<th scope=\"col\">位置</th>" +
                "<th scope=\"col\">总击杀</th>" +
                "</tr>";

            for (let item of res) {
                if (count >= 5) {
                    break;
                }
                count++
                Str += "<tr>" +
                    "<td><span>" + count + "</span></td>" +
                    "<td>" + item.name + "</td>" +
                    "<td>" + item.seat + "<br></td>" +
                    "<td>" + item.kills + "<br></td>" +
                    "</tr>"
            }
            document.getElementById("personal")
                .innerHTML = Str;

        })
    </script>




</body>

</html>